<template>
  <div class="box">
    <!-- 搜索框 -->
    <div>
      <van-search
        placeholder="请输入关键词"
        disabled
        shape="round"
        @click="$router.push('/SearchPopup')"
      />
    </div>
    <div class="view">
      <van-sidebar v-model="activeKey">
        <van-sidebar-item
          :title="item.name"
          v-for="item in categoryList"
          :key="item.id"
          @click="ziFenLei(item.id)"
        >
        </van-sidebar-item>
      </van-sidebar>
      <div class="ziFenLei">
        <transition name="slide">
          <ZiFenLei
            :currentCategory="currentCategory"
            :subCategoryList="subCategoryList"
          ></ZiFenLei>
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
import Tips from "@/components/Tips.vue";
import { getCatalog, getZiFenLeiList } from "@/request/api.js";
import ZiFenLei from "@/components/ZiFenLei.vue";
export default {
  name: 'CateGory',
  components: {
    Tips,
    ZiFenLei,
  },
  data() {
    return {
      categoryList: [],
      activeKey: 0,
      currentCategory: {},
      subCategoryList: [],
    };
  },
  async created() {
    const res = await getCatalog();
    if (res.errno == 0) {
      this.categoryList = res.data.categoryList;
      this.ziFenLei(this.categoryList[0].id);
    }
  },
  methods: {
    ziFenLei(id) {
      this.getList(id);
    },
    // 获取子分类数据
    async getList(id) {
      let res = await getZiFenLeiList({ id });
      if (res.errno === 0) {
        this.currentCategory = res.data.currentCategory;
        this.subCategoryList = res.data.currentCategory.subCategoryList;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  height: 100%;
}
.view {
  display: flex;
  height: 90%;
  .van-sidebar {
    background: #f7f8fa;
    overflow-y: auto;
  }
  .ziFenLei {
    width: 80%;
  }
}
</style>